<div class="row">
    <div id="breadcrumb" class="col-xs-12">
        <a href="#" class="show-sidebar">
            <i class="fa fa-bars"></i>
        </a>
        <ol class="breadcrumb pull-left">
            <li><a href="index.html">首页</a></li>
            <li><a href="#">系统管理</a></li>
            <li><a href="#">用户管理</a></li>
        </ol>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="box ui-draggable ui-droppable">
                <div class="box-header">
                    <div class="box-name">
                        <i class="fa fa-coffee"></i> <span>用户管理</span>
                    </div>
                    <div class="box-icons">
                        <a class="collapse-link"> <i class="fa fa-chevron-up"></i>
                        </a> <a class="expand-link"> <i class="fa fa-expand"></i>
                    </a> <a class="close-link"> <i class="fa fa-times"></i>
                    </a>
                    </div>
                    <div class="no-move"></div>
                </div>
                <div class="box-content">
                    <button id="adduser" type="button" class="btn btn-primary">添加新用户</button>
                    <table id="grid-data" class="table table-condensed table-hover table-striped">
                        <thead>
                        <tr>
                            <th data-column-id="id" data-identifier="true" data-type="numeric">用户id</th>
                            <th data-column-id="username">用户名</th>
                            <th data-column-id="roles">拥有角色</th>
                            <th data-column-id="locked">是否锁定</th>
                            <th data-formatter="commands">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var grid = $("#grid-data").bootgrid({
            ajaxSettings: {
                method: "GET"
            },
            navigation: 2,
            columnSelection: false,
            ajax: true,
            url: "../users",
            formatters: {
                "commands": function (column, row) {
                    return "<button class=\"btn btn-xs btn-default ajax-link command-run1\" data-row-id=\"" + row.id + "\">修改</button>" +
                        "<button class=\"btn btn-xs btn-default ajax-link\" onclick=\"deleteuser(" + row.id + ")\" data-row-id=\"" + row.id + "\">删除</button>";
                }
            }

        }).on("loaded.rs.jquery.bootgrid", function () {
            grid.find(".command-run1").on("click", function (e) {
                $("#userinfo").modal();
                var uid = $(this).data("row-id");
                $.get("../users/" + uid, function (data) {
                    $("#username2").val(data.username);
                    var user_role = data.user_roles;
                    var roles = [];
                    for (var a = 0; a < user_role.length; a++) {
                        var role = user_role[a].role.role;
                        roles.push(role);
                    }
                    $.get("../allroles", function (a) {
                        $("#roles").html("");
                        for (var m = 0; m < a.length; m++) {
                            if (roles.indexOf(a[m].role) < 0)
                                $("#roles").append("<div class=\"checkbox-inline\"><label><input name='rolename[]' value=" + a[m].roleid + " type=\"checkbox\">" + a[m].role + "<i class=\"fa fa-square-o\"></i></label></div>");
                            else
                                $("#roles").append("<div class=\"checkbox-inline\"><label><input name='rolename[]' value=" + a[m].roleid + " type=\"checkbox\" checked=\"checked\">" + a[m].role + "<i class=\"fa fa-square-o\"></i></label></div>");
                        }
                        roles = [];
                    });
                    $("#updatebtn").click(function () {
                        var checked = [];
                        $('input[name="rolename[]"]:checked').each(function () {
                            var temp = {"role": {"roleid": $(this).val()}};
                            checked.push(temp);
                        });
                        var json = {"userid": uid, "locked": $("#locked").val(), "user_roles": checked};
                        $.ajax({
                            url: "../users/" + uid,
                            type: "PUT",
                            data: JSON.stringify(json), //转JSON字符串
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8', //contentType很重要
                            success: function (result) {
                                alert("修改成功");
                                LoadAjaxContent("useradmin.html");
                                $("#userinfo").modal('hide');
                                history.go(0);
                            }
                        });
                        checked = [];

                    });
                });

            });


        });
    });

    function deleteuser(uid) {
        $.ajax({
            type: 'DELETE',
            url: "../users/" + uid,
            success: function (data) {
                if (data.state == "delete success") {
                    alert("删除成功");
                    LoadAjaxContent("useradmin.html");
                } else {
                    alert("您没有权限");
                }
            }
        });
    }

    $(document).ready(function () {
        $("#adduser").click(function () {
            $("#insertmodal").modal();
            $.get("../allroles", function (a) {
                $("#rolelist").html("");
                for (var m = 0; m < a.length; m++) {
                    $("#rolelist").append("<div class=\"checkbox\"><label><input name='rolename[]' value=" + a[m].roleid + " type=\"checkbox\">" + a[m].role + "<i class=\"fa fa-square-o\"></i></label></div>");
                }
            });

        });

        $("#addbtn").click(function () {
            if ($("#addusername").val() == "") {
                alert("用户名不得为空");
                return false;
            }
            if ($("#password").val() == "" || $("#repeatpwd").val() == "") {
                alert("密码不得为空");
                return false;
            }
            if ($("#password").val() != $("#repeatpwd").val()) {
                alert("两次密码不一致");
                return false;
            }

            var checked = [];
            $('input[name="rolename[]"]:checked').each(function () {
                var temp = {"role": {"roleid": $(this).val()}};
                checked.push(temp);
            });
            var json = {
                "username": $("#addusername").val(), "password": $("#password").val(), "locked": false,
                "user_roles": checked
            };
            $.ajax({
                url: "../users",
                type: "POST",
                data: JSON.stringify(json), //转JSON字符串
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8', //contentType很重要
                success: function (result) {
                    alert("添加成功");
                    LoadAjaxContent("useradmin.html");
                    $("#insertmodal").modal('hide');
                    history.go(0);
                    //LoadAjaxContent("useradmin.html");
                }
            });
            checked = [];

        });

    });

</script>
<div id="userinfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
            </div>
            <form class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="row form-group">
                        <label for="username2" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="username2" readonly="readonly">
                        </div>
                    </div>
                    <h4 class="page-header">拥有角色</h4>
                    <div class="row form-group">
                        <div class="col-sm-12" id="roles">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="locked" class="col-sm-2 control-label">是否锁定</label>
                        <div class="col-sm-10">
                            <select name="locked" id="locked">
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="updatebtn" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="insertmodal" id="form2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
            </div>
            <form class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="row form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="addusername">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="password" class="form-control" id="password">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="repeatpwd" class="col-sm-2 control-label">重复密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="repeatpwd" class="form-control" id="repeatpwd">
                        </div>
                    </div>
                    <h4 class="page-header">拥有角色</h4>
                    <div class="row form-group">
                        <div class="col-sm-12" id="rolelist">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="addbtn" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>